<template>
    <view>
        <view class="certificate-detail-container">
            <scroll-view class="scroll-view" scroll-y>
                <view class="certificate-detail-list">
                    <view class="certificate-detail-item">
                        <view class="item-label">
                            <text class="require">*</text>
                            证书类型
                        </view>
                        <view class="item-content" @tap="openCertificateChoose">
                            <text :class="certificateInfo.name ? '' : 'no-content'">{{ certificateInfo.name || '请选择' }}</text>
                            <text class="right-arrow"></text>
                        </view>
                    </view>
                    <view class="certificate-detail-item">
                        <view class="item-label">
                            <text class="require">*</text>
                            证书编号
                        </view>
                        <view class="item-content">
                            <input type="text" v-model="number" placeholder="请输入" class="ipt" placeholder-class="placeholder-class" maxlength="50" />
                        </view>
                    </view>
                    <view class="certificate-detail-item">
                        <view class="item-label">
                            <text class="require">*</text>
                            是否永久有效
                        </view>
                        <picker mode="selector" :value="selectValidIndex" class="choose-item-content" :range="validList" range-key="text" @change="changeValid">
                            <view class="choose-item-container">
                                <view class="choose-item">{{ certificateInfo.isPermanent ? '是' : '否' }}</view>
                                <text class="right-arrow"></text>
                            </view>
                        </picker>
                    </view>
                    <view class="certificate-detail-item">
                        <view class="item-label">
                            <text class="require">*</text>
                            发证日期
                        </view>
                        <picker mode="date" :value="certificateInfo.issuedAtData" class="choose-item-content" @change="changeDate" data-type="issuedAt">
                            <view class="choose-item-container">
                                <view class="choose-item">{{ certificateInfo.issuedAtData }}</view>
                                <text class="right-arrow"></text>
                            </view>
                        </picker>
                    </view>
                    <view class="certificate-detail-item" v-if="!certificateInfo.isPermanent">
                        <view class="item-label">
                            <text class="require">*</text>
                            到期日期
                        </view>
                        <picker mode="date" :value="certificateInfo.expiredAtData" class="choose-item-content" @change="changeDate" data-type="expiredAt">
                            <view class="choose-item-container">
                                <view class="choose-item">{{ certificateInfo.expiredAtData }}</view>
                                <text class="right-arrow"></text>
                            </view>
                        </picker>
                    </view>
                    <view class="certificate-detail-vertical">
                        <view class="item-label">
                            <text class="require">*</text>
                            证书图片
                            <text class="tips">（最多上传9张）</text>
                        </view>
                        <view class="pic-list">
                            <multiple-upload-pic :max="9" :width="200" :height="150" :imgPath="showImages" @chooseimg="chooseImg"></multiple-upload-pic>
                        </view>
                    </view>
                </view>
            </scroll-view>
            <view class="common-btns-container">
                <view class="common-btn-container" hover-class="common-btn" @tap="saveCertificate">提交</view>
            </view>
        </view>

        <choose-certificate :show="show" @cancel="cancel" @choosecertificate="chooseCertificate" :initValue="initValue"></choose-certificate>
    </view>
</template>

<script>
import multipleUploadPic from '@/components/common/multiple-upload-pic/multiple-upload-pic';
import chooseCertificate from '@/components/roster/choose-certificate/choose-certificate';
import moment from 'moment';
const app = getApp();
export default {
    components: {
        multipleUploadPic,
        chooseCertificate
    },
    data() {
        return {
            certificateInfo: {
                isPermanent: '',
                expiredAtData: '',
                name: '',
                issuedAtData: ''
            },
            selectValidIndex: 0,
            validList: [
                {
                    value: false,
                    text: '否'
                },
                {
                    value: true,
                    text: '是'
                }
            ],
            show: false,
            initValue: '',
            number: '',
            images: [],
            showImages: [],
            isAddCertificateInfo: false,
            isEditCertificateInfo: false
        };
    },
    onLoad(options) {
        if (options.type == 'edit') {
            uni.setNavigationBarTitle({
                title: '编辑证书'
            });
            if (app.globalData.hasCertificateInfo) {
                this.certificateInfo = app.globalData.certificateInfo;
            }
            this.setData({
                showImages: this.certificateInfo.showImages || this.certificateInfo.images,
                images: this.certificateInfo.images,
                number: this.certificateInfo.number,
                initValue: this.certificateInfo.code,
                certificateInfo: this.certificateInfo
            });
            this.isAddCertificateInfo = false;
            this.isEditCertificateInfo = true;
            delete app.globalData.hasCertificateInfo;
        } else {
            uni.setNavigationBarTitle({
                title: '新增证书'
            });
            this.isAddCertificateInfo = true;
            this.isEditCertificateInfo = false;
        }
    },
    onShow() {},
    methods: {
        changeValid(e) {
            const index = e.detail.value;
            if (index != this.selectValidIndex) {
                this.certificateInfo.expiredAtData = '';
            }
            this.setData({
                selectValidIndex: index,
                ['certificateInfo.isPermanent']: this.validList[index].value,
                ['certificateInfo.expiredAtData']: this.certificateInfo.expiredAtData
            });
        },

        changeDate(e) {
            const val = e.detail.value;
            const type = e.currentTarget.dataset.type;
            this.setData({
                [`certificateInfo.${type}Data`]: val,
                [`certificateInfo.${type}`]: moment(val, 'YYYY-MM-DD').valueOf()
            });
        },

        openCertificateChoose() {
            this.setData({
                show: true
            });
        },

        chooseCertificate(e) {
            const result = e.detail;
            let nameArr = [];
            for (let item of result.selectedOptions) {
                nameArr.push(item.name);
            }
            this.setData({
                initValue: result.value,
                ['certificateInfo.name']: nameArr.join('/')
            });
        },

        cancel() {
            this.setData({
                show: false
            });
        },

        chooseImg(e) {
            this.setData({
                images: e.detail.filePath,
                showImages: e.detail.showImgPath
            });
        },

        saveCertificate() {
            let certificateInfo = this.certificateInfo;
            if (!this.initValue) {
                app.globalData.message.toast('请选择证书类型');
                return;
            }
            if (!this.number) {
                app.globalData.message.toast('请输入证书编号');
                return;
            }
            if (!certificateInfo.issuedAtData) {
                app.globalData.message.toast('请选择发证日期');
                return;
            }
            if (moment(certificateInfo.issuedAtData) > moment()) {
                app.globalData.message.toast('发证日期不能超过今天');
                return;
            }
            if (!certificateInfo.isPermanent && !certificateInfo.expiredAtData) {
                app.globalData.message.toast('请选择到期日期');
                return;
            }
            if (moment(certificateInfo.issuedAtData) >= moment(certificateInfo.expiredAtData)) {
                app.globalData.message.toast('到期日期不能小于发证日期');
                return;
            }
            if (this.images.length == 0) {
                app.globalData.message.toast('请选择证书图片');
                return;
            }
            certificateInfo.code = this.initValue;
            certificateInfo.number = this.number;
            certificateInfo.images = this.images;
            certificateInfo.showImages = this.showImages;
            app.globalData.isAddCertificateInfo = this.isAddCertificateInfo;
            app.globalData.isEditCertificateInfo = this.isEditCertificateInfo;
            app.globalData.certificateInfo = certificateInfo;
            uni.navigateBack();
        }
    }
};
</script>
<style>
.certificate-detail-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f6f7fa;
}

.scroll-view {
    height: 0;
    flex: 1;
}

.certificate-detail-list {
    background-color: #fff;
    padding: 0 32rpx;
}

.certificate-detail-item {
    display: flex;
    border-bottom: 1rpx solid #e1e2e7;
    padding: 28rpx 0;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    align-items: center;
}

.item-label {
    color: #1e253f;
    margin-right: 32rpx;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.item-label .require {
    color: #ff3838;
    margin-right: 8rpx;
    position: relative;
    top: 5rpx;
}

.item-content {
    flex: 1;
    color: #4b5680;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.choose-item-content {
    width: 100%;
}

.choose-item-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.choose-item-content .choose-item {
    color: #4b5680;
}

.no-content {
    color: #bbc2dc;
}

.right-arrow {
    width: 15rpx;
    height: 15rpx;
    border-top: 4rpx solid #949dbf;
    border-right: 4rpx solid #949dbf;
    transform: rotate(45deg);
    margin-left: 12rpx;
}

.certificate-detail-vertical .item-label {
    margin-right: 0;
    margin-top: 28rpx;
}

.item-label .tips {
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #949dbf;
}

.pic-list {
    display: flex;
    align-items: center;
    padding-bottom: 24rpx;
}

.pic-list .pic {
    width: 200rpx;
    height: 150rpx;
    background-color: #f6f7fa;
    border-radius: 6rpx;
    margin-top: 28rpx;
    margin-right: 24rpx;
}

.ipt {
    text-align: right;
    color: #4b5680;
}

.placeholder-class {
    font-size: 32rpx;
    color: #bbc2dc;
}
</style>
